<template>
  <div class="property-preview">
    <div class="preview-header">
      <h4>属性预览</h4>
      <el-button
        @click="togglePreview"
        link
        size="small"
      >
        <el-icon>
          <View v-if="!showPreview" />
          <Hide v-else />
        </el-icon>
        {{ showPreview ? '隐藏预览' : '显示预览' }}
      </el-button>
    </div>
    
    <div v-if="showPreview && selectedComponent" class="preview-content">
      <div class="preview-container">
        <FormComponent 
          :component="selectedComponent"
          @update-value="handleValueUpdate"
        />
      </div>
      
      <div class="preview-info">
        <h5>组件信息</h5>
        <div class="info-item">
          <span class="label">类型:</span>
          <span class="value">{{ getComponentTypeName(selectedComponent.type) }}</span>
        </div>
        <div class="info-item">
          <span class="label">字段名:</span>
          <span class="value">{{ selectedComponent.props.field || '未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前值:</span>
          <span class="value">{{ JSON.stringify(selectedComponent.value) }}</span>
        </div>
        <div class="info-item">
          <span class="label">尺寸:</span>
          <span class="value">{{ selectedComponent.size.width }} × {{ selectedComponent.size.height }}</span>
        </div>
        <div class="info-item">
          <span class="label">位置:</span>
          <span class="value">({{ selectedComponent.position.x }}, {{ selectedComponent.position.y }})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { View, Hide } from '@element-plus/icons-vue'
import FormComponent from './FormComponent.vue'
import type { CanvasComponent } from '../types'

interface Props {
  selectedComponent: CanvasComponent | null
}

const props = defineProps<Props>()

const showPreview = ref(true)

const togglePreview = () => {
  showPreview.value = !showPreview.value
}

const handleValueUpdate = (value: any) => {
  if (props.selectedComponent) {
    props.selectedComponent.value = value
  }
}

const getComponentTypeName = (type: string): string => {
  const typeMap: Record<string, string> = {
    'input': '输入框',
    'textarea': '文本域',
    'radio': '单选框',
    'checkbox': '多选框',
    'select': '下拉选择',
    'date': '日期选择',
    'number': '数字输入',
    'divider': '分割线',
    'text': '静态文本'
  }
  return typeMap[type] || type
}
</script>

<style scoped lang="scss">
.property-preview {
  border-top: 1px solid #e4e7ed;
  background: #fafafa;
  
  .preview-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e7ed;
    
    h4 {
      margin: 0;
      color: #303133;
      font-size: 14px;
    }
  }
  
  .preview-content {
    padding: 16px;
    
    .preview-container {
      background: white;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 16px;
      min-height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .preview-info {
      background: white;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 12px;
      
      h5 {
        margin: 0 0 12px 0;
        color: #303133;
        font-size: 13px;
      }
      
      .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
        
        .label {
          color: #606266;
          font-weight: 500;
        }
        
        .value {
          color: #303133;
          word-break: break-all;
        }
      }
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 0;
  width: 100%;
}

:deep(.el-form-item__label) {
  font-size: 12px;
  line-height: 1.2;
}

:deep(.el-input),
:deep(.el-textarea),
:deep(.el-select),
:deep(.el-date-editor),
:deep(.el-input-number) {
  font-size: 12px;
}

:deep(.el-radio),
:deep(.el-checkbox) {
  font-size: 12px;
  margin-right: 8px;
}
</style> 